<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset="utf-8">
    
    <title>为 Hexo 主题添加评论模块 — Disqus, 多说, 友言 | 夏红林</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="前言目前自己的主题 Yelee 已支持使用 Disqus, 多说和友言评论，代码逻辑和配置也做了些优化，应该是比较完善了。简单分离整理一下，分享于此，方便大家添加到自己制作或使用的主题中。">
<meta property="og:type" content="article">
<meta property="og:title" content="为 Hexo 主题添加评论模块 — Disqus, 多说, 友言">
<meta property="og:url" content="http://xiahl.top/2016/01/02/hexo-comments/index.html">
<meta property="og:site_name" content="夏红林">
<meta property="og:description" content="前言目前自己的主题 Yelee 已支持使用 Disqus, 多说和友言评论，代码逻辑和配置也做了些优化，应该是比较完善了。简单分离整理一下，分享于此，方便大家添加到自己制作或使用的主题中。">
<meta property="og:updated_time" content="2016-06-27T12:27:10.054Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="为 Hexo 主题添加评论模块 — Disqus, 多说, 友言">
<meta name="twitter:description" content="前言目前自己的主题 Yelee 已支持使用 Disqus, 多说和友言评论，代码逻辑和配置也做了些优化，应该是比较完善了。简单分离整理一下，分享于此，方便大家添加到自己制作或使用的主题中。">
    

    

    

    <link rel="stylesheet" href="/icarus/vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/icarus/vendor/open-sans/styles.css">
    <link rel="stylesheet" href="/icarus/vendor/source-code-pro/styles.css">

    <link rel="stylesheet" href="/icarus/css/style.css">

    <!-- jQuery -->
    <script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
    
    
        <link rel="stylesheet" href="/icarus/vendor/fancybox/jquery.fancybox.css">
    
    
    
    

</head>
<body>
    <div id="container">
        <header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="/icarus/" id="logo">
                <i class="logo"></i>
                <span class="site-title">夏红林</span>
            </a>
            <nav id="main-nav">
                
                    <a class="main-nav-link" href="/icarus/.">Home</a>
                
                    <a class="main-nav-link" href="/icarus/archives">Archives</a>
                
                    <a class="main-nav-link" href="/icarus/categories">Categories</a>
                
                    <a class="main-nav-link" href="/icarus/tags">Tags</a>
                
                    <a class="main-nav-link" href="/icarus/about">About</a>
                
                    <a class="main-nav-link" href="http://xiahl.top/">Theme</a>
                
            </nav>
            
                
                <nav id="sub-nav">
                    <div class="profile" id="profile-nav">
                        <a id="profile-anchor" href="javascript:;">
                            <img class="avatar" src="/icarus/css/images/avatar.png" />
                            <i class="fa fa-caret-down"></i>
                        </a>
                    </div>
                </nav>
            
            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="想要查找什么..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/icarus/',
        CONTENT_URL: '/icarus/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/icarus/js/insight.js"></script>

</div>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tr>
                
                    <td><a class="main-nav-link" href="/icarus/.">Home</a></td>
                
                    <td><a class="main-nav-link" href="/icarus/archives">Archives</a></td>
                
                    <td><a class="main-nav-link" href="/icarus/categories">Categories</a></td>
                
                    <td><a class="main-nav-link" href="/icarus/tags">Tags</a></td>
                
                    <td><a class="main-nav-link" href="/icarus/about">About</a></td>
                
                    <td><a class="main-nav-link" href="http://xiahl.top/">Theme</a></td>
                
                <td>
                    
    <div class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
    </div>

                </td>
            </tr>
        </table>
    </div>
</header>

        <div class="outer">
            
                

<aside id="profile">
    <div class="inner profile-inner">
        <div class="base-info profile-block">
            <img id="avatar" src="/icarus/css/images/avatar.png" />
            <h2 id="name">Tianxiamucun</h2>
            <h3 id="title">Web Developer &amp; Designer</h3>
            <span id="location"><i class="fa fa-map-marker"></i>Harbin, China</span>
            <a id="follow" target="_blank" href="https://github.com/Xiahl1990">关注我</a>
        </div>
        <div class="article-info profile-block">
            <div class="article-info-block">
                9
                <span>文章</span>
            </div>
            <div class="article-info-block">
                7
                <span>标签</span>
            </div>
        </div>
        
        <div class="profile-block social-links">
            <table>
                <tr>
                    
                    
                    <td>
                        <a href="https://github.com/Xiahl1990/hexo-theme-tianxiamucun" target="_blank" title="github" class=tooltip>
                            <i class="fa fa-github"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/icarus/" target="_blank" title="twitter" class=tooltip>
                            <i class="fa fa-twitter"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/icarus/" target="_blank" title="facebook" class=tooltip>
                            <i class="fa fa-facebook"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/icarus/" target="_blank" title="dribbble" class=tooltip>
                            <i class="fa fa-dribbble"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/icarus/" target="_blank" title="rss" class=tooltip>
                            <i class="fa fa-rss"></i>
                        </a>
                    </td>
                    
                </tr>
            </table>
        </div>
        
    </div>
</aside>

            
            <section id="main"><article id="post-hexo-comments" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
        
            <header class="article-header">
                
    
        <h1 class="article-title" itemprop="name">
            为 Hexo 主题添加评论模块 — Disqus, 多说, 友言
        </h1>
    

                <div class="article-meta">
                    
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/icarus/2016/01/02/hexo-comments/">
            <time datetime="2016-01-01T17:26:48.000Z" itemprop="datePublished">2016-01-02</time>
        </a>
    </div>


                    
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/icarus/categories/术业专攻/">术业专攻</a>
    </div>

                    
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/icarus/tags/Hexo/">Hexo</a>
    </div>

                </div>
            </header>
        
        <div class="article-entry" itemprop="articleBody">
        
            
                <div id="toc" class="toc-article">
                <strong class="toc-title">文章目录</strong>
                    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#intro"><span class="toc-number">1.</span> <span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#文件结构"><span class="toc-number">2.</span> <span class="toc-text">文件结构</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#文件下载"><span class="toc-number">2.1.</span> <span class="toc-text">文件下载</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#关联模块"><span class="toc-number">3.</span> <span class="toc-text">关联模块</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#代码简析"><span class="toc-number">3.1.</span> <span class="toc-text">代码简析</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#新评论系统添加"><span class="toc-number">3.2.</span> <span class="toc-text">新评论系统添加</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#配置更新"><span class="toc-number">4.</span> <span class="toc-text">配置更新</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#模块代码"><span class="toc-number">5.</span> <span class="toc-text">模块代码</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Disqus"><span class="toc-number">5.1.</span> <span class="toc-text">Disqus</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#多说评论"><span class="toc-number">5.2.</span> <span class="toc-text">多说评论</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#友言评论"><span class="toc-number">5.3.</span> <span class="toc-text">友言评论</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#相关链接"><span class="toc-number">6.</span> <span class="toc-text">相关链接</span></a></li></ol>
                </div>
            
            <p></p><h2 id="intro">前言</h2>目前自己的主题 <a href="https://github.com/MOxFIVE/hexo-theme-yelee" target="_blank" rel="external">Yelee</a> 已支持使用 Disqus, 多说和友言评论，代码逻辑和配置也做了些优化，应该是比较完善了。简单分离整理一下，分享于此，方便大家添加到自己制作或使用的主题中。<p></p>
<a id="more"></a>
<h2 id="文件结构"><a href="#文件结构" class="headerlink" title="文件结构"></a>文件结构</h2><p>参考以下文件结构把复制的代码和下载的文件放到合适的位置，必要时自行修改文件引用位置。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">yelee/_config.yml</span><br><span class="line">-----/layout/_partial/article.ejs</span><br><span class="line">---------------------/comments/disqus.ejs</span><br><span class="line">------------------------------/duoshuo.ejs</span><br><span class="line">------------------------------/youyan.ejs</span><br></pre></td></tr></table></figure>
<h3 id="文件下载"><a href="#文件下载" class="headerlink" title="文件下载"></a>文件下载</h3><blockquote>
<p><a href="/resources/Hexo评论模块.zip">Hexo 评论模块（Disqus, 多说, 友言）.zip</a> by MOxFIVE</p>
</blockquote>
<h2 id="关联模块"><a href="#关联模块" class="headerlink" title="关联模块"></a>关联模块</h2><p>在合适位置添加以下代码，以便引入评论模块代码。代码使用我比较熟悉的 EJS 书写，使用 Swig, Jade 等其他模板的，请自行转换。</p>
<figure class="highlight actionscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;% <span class="keyword">if</span> (!is_home() &amp;&amp; post.comments)&#123; %&gt;</span><br><span class="line">    &lt;% <span class="keyword">if</span> (theme.duoshuo.on) &#123; %&gt;</span><br><span class="line">      &lt;%- partial(<span class="string">'comments/duoshuo'</span>, &#123;</span><br><span class="line">          key: post.path,</span><br><span class="line">          title: post.title,</span><br><span class="line">          url: config.url+url_for(post.path),</span><br><span class="line">          &#125;) %&gt;</span><br><span class="line">    &lt;% &#125; <span class="keyword">else</span> <span class="keyword">if</span> (theme.youyan.on) &#123; %&gt;</span><br><span class="line">        &lt;%- partial(<span class="string">'comments/youyan'</span>) %&gt;</span><br><span class="line">    &lt;% &#125; <span class="keyword">else</span> <span class="keyword">if</span> (theme.disqus.on) &#123; %&gt;</span><br><span class="line">        &lt;%- partial(<span class="string">'comments/disqus'</span>, &#123;</span><br><span class="line">            shortname: theme.disqus.shortname</span><br><span class="line">          &#125;) %&gt;</span><br><span class="line">    &lt;% &#125; <span class="keyword">else</span> <span class="keyword">if</span> (config.disqus_shortname) &#123; %&gt;</span><br><span class="line">        &lt;%- partial(<span class="string">'comments/disqus'</span>, &#123;</span><br><span class="line">            shortname: config.disqus_shortname</span><br><span class="line">          &#125;) %&gt;</span><br><span class="line">    &lt;% &#125; %&gt;</span><br><span class="line">&lt;% &#125; %&gt;</span><br></pre></td></tr></table></figure>
<h3 id="代码简析"><a href="#代码简析" class="headerlink" title="代码简析"></a>代码简析</h3><figure class="highlight actionscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--<span class="comment">//如果不是首页且没使用 `comments: false` 关闭评论，则尝试加载评论 --&gt;</span></span><br><span class="line">&lt;% <span class="keyword">if</span> (!is_home() &amp;&amp; post.comments)&#123; %&gt;</span><br><span class="line">    &lt;!--<span class="comment">//配置中启用多说时，导入相应代码 --&gt;</span></span><br><span class="line">    &lt;% <span class="keyword">if</span> (theme.duoshuo.on) &#123; %&gt; </span><br><span class="line">      &lt;!--<span class="comment">//导入duoshuo.ejs时，同时指定其中几个变量的内容。 --&gt;</span></span><br><span class="line">      &lt;%- partial(<span class="string">'comments/duoshuo'</span>, &#123;</span><br><span class="line">          key: post.path,</span><br><span class="line">          title: post.title,</span><br><span class="line">          url: config.url+url_for(post.path),</span><br><span class="line">          &#125;) %&gt;</span><br><span class="line">    &lt;!--<span class="comment">//配置中仅启用友言时，导入相应代码 --&gt;</span></span><br><span class="line">    &lt;% &#125; <span class="keyword">else</span> <span class="keyword">if</span> (theme.youyan.on) &#123; %&gt;</span><br><span class="line">        &lt;%- partial(<span class="string">'comments/youyan'</span>) %&gt;</span><br><span class="line">    &lt;!--<span class="comment">//配置中仅启用 Disqus 时，导入相应代码 --&gt;</span></span><br><span class="line">    &lt;% &#125; <span class="keyword">else</span> <span class="keyword">if</span> (theme.disqus.on) &#123; %&gt;</span><br><span class="line">        &lt;%- partial(<span class="string">'comments/disqus'</span>, &#123;</span><br><span class="line">            shortname: theme.disqus.shortname</span><br><span class="line">          &#125;) %&gt;</span><br><span class="line">    &lt;!--<span class="comment">//以上皆关闭且 Hexo 配置中设置了 disqus_shortname 时，导入相应代码 --&gt;</span></span><br><span class="line">    &lt;% &#125; <span class="keyword">else</span> <span class="keyword">if</span> (config.disqus_shortname) &#123; %&gt;</span><br><span class="line">        &lt;!--<span class="comment">//文件分离和变量的使用，使代码能较好的兼容 Hexo 主配置 --&gt;</span></span><br><span class="line">        &lt;%- partial(<span class="string">'comments/disqus'</span>, &#123;</span><br><span class="line">            shortname: config.disqus_shortname</span><br><span class="line">          &#125;) %&gt;</span><br><span class="line">    &lt;% &#125; %&gt;</span><br><span class="line">&lt;% &#125; %&gt;</span><br></pre></td></tr></table></figure>
<h3 id="新评论系统添加"><a href="#新评论系统添加" class="headerlink" title="新评论系统添加"></a>新评论系统添加</h3><ul>
<li>如果你想使用畅言或者其他社会化评论系统，并能灵活切换，请参考上文，新加一个 else if 判断引入服务商提供的代码，同时参考后文的配置添加新的设置项。</li>
</ul>
<h2 id="配置更新"><a href="#配置更新" class="headerlink" title="配置更新"></a>配置更新</h2><p>在主题中添加以下设置项进行评论功能的配置。评论设置为二级选项，因为之前不少人设置了 <code>duoshuo: true</code> ，结果都进群聊了。要启用某一个评论系统，只需去掉 on 前的 “#”，同时按照说明设置好对应个人账号信息即可。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># &gt;&gt;&gt; Conments 评论系统 &lt;&lt;&lt;</span></span><br><span class="line"><span class="comment"># Chose ONE as your comment system and keep others disable.</span></span><br><span class="line"><span class="comment"># 选一个作为网站评论系统，其他保持禁用。</span></span><br><span class="line"></span><br><span class="line"><span class="attr">disqus:</span> </span><br><span class="line">  <span class="comment">#on: true</span></span><br><span class="line"><span class="attr">  shortname:</span> </span><br><span class="line">  <span class="comment"># https://help.disqus.com/customer/en/portal/articles/466208-what-s-a-shortname-</span></span><br><span class="line">  <span class="comment"># It is unnecessary to enable disqus here if </span></span><br><span class="line">  <span class="comment"># you have set "disqus_shortname" in your site's "_config.yml" </span></span><br><span class="line"></span><br><span class="line"><span class="attr">duoshuo:</span> </span><br><span class="line">  <span class="comment">#on: true</span></span><br><span class="line"><span class="attr">  domain:</span> </span><br><span class="line">  <span class="comment"># 是否开启多说评论，http://duoshuo.com/create-site/</span></span><br><span class="line">  <span class="comment"># 使用上面网址登陆你的多说，然后创建站点，在 domain 中填入你设定的域名前半部分</span></span><br><span class="line">  <span class="comment"># http://&lt;要填的部分&gt;.duoshuo.com (domain只填上&lt;&gt;里的内容，不要填整个网址)</span></span><br><span class="line"></span><br><span class="line"><span class="attr">youyan:</span></span><br><span class="line">  <span class="comment">#on: true</span></span><br><span class="line"><span class="attr">  id:</span> </span><br><span class="line">  <span class="comment"># 是否开启友言评论，http://www.uyan.cc/index.php</span></span><br><span class="line">  <span class="comment"># id 中填写你的友言用户数字ID，注册后进入后台管理即可查看</span></span><br><span class="line">  <span class="comment"># 友言服务在 Web 环境下运行，普通本地环境无法查看，请部署后在线上测试。</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># &gt;&gt;&gt; &lt;&lt;&lt;</span></span><br></pre></td></tr></table></figure>
<h2 id="模块代码"><a href="#模块代码" class="headerlink" title="模块代码"></a>模块代码</h2><p>模块代码已附在下载文件中，在此同时列出备用。依旧是使用 EJS 编写，引入一些信息，设置了几个变量，使用其他模板引擎请自行转换。所有评论模块都设置了 <code>id=&quot;comments&quot;</code>，以便有需要时通过锚点定位跳转到评论区。</p>
<h3 id="Disqus"><a href="#Disqus" class="headerlink" title="Disqus"></a>Disqus</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">section</span> <span class="attr">id</span>=<span class="string">"comments"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"disqus_thread"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="actionscript"></span><br><span class="line">    <span class="comment">/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */</span></span><br><span class="line">    <span class="keyword">var</span> disqus_shortname = <span class="string">'&lt;%= shortname%&gt;'</span>; <span class="comment">// required: replace example with your forum shortname</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">/* * * DON'T EDIT BELOW THIS LINE * * */</span></span><br><span class="line">    (<span class="function"><span class="keyword">function</span><span class="params">()</span> </span>&#123;</span><br><span class="line">      <span class="keyword">var</span> dsq = document.createElement(<span class="string">'script'</span>); dsq.type = <span class="string">'text/javascript'</span>; dsq.async = <span class="literal">true</span>;</span><br><span class="line">      dsq.src = <span class="string">'//'</span> + disqus_shortname + <span class="string">'.disqus.com/embed.js'</span>;</span><br><span class="line">      (document.getElementsByTagName(<span class="string">'head'</span>)[<span class="number">0</span>] || document.getElementsByTagName(<span class="string">'body'</span>)[<span class="number">0</span>]).appendChild(dsq);</span><br><span class="line">    &#125;)();</span><br><span class="line">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">noscript</span>&gt;</span>Please enable JavaScript to view the <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://disqus.com/?ref_noscript"</span>&gt;</span>comments powered by Disqus.<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">noscript</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="多说评论"><a href="#多说评论" class="headerlink" title="多说评论"></a>多说评论</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"duoshuo"</span> <span class="attr">id</span>=<span class="string">"comments"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 多说评论框 start --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"ds-thread"</span> <span class="attr">data-thread-key</span>=<span class="string">"&lt;%= key%&gt;"</span> <span class="attr">data-title</span>=<span class="string">"&lt;%= title%&gt;"</span> <span class="attr">data-url</span>=<span class="string">"&lt;%= url%&gt;"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 多说评论框 end --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 多说公共JS代码 start (一个网页只需插入一次) --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="actionscript"></span><br><span class="line">    <span class="keyword">var</span> duoshuoQuery = &#123;short_name:<span class="string">"&lt;%= theme.duoshuo.domain%&gt;"</span>&#125;;</span><br><span class="line">    (<span class="function"><span class="keyword">function</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> ds = document.createElement(<span class="string">'script'</span>);</span><br><span class="line">        ds.type = <span class="string">'text/javascript'</span>;ds.async = <span class="literal">true</span>;</span><br><span class="line">        ds.src = (document.location.protocol == <span class="string">'https:'</span> ? <span class="string">'https:'</span> : <span class="string">'http:'</span>) + <span class="string">'//static.duoshuo.com/embed.js'</span>;</span><br><span class="line">        ds.charset = <span class="string">'UTF-8'</span>;</span><br><span class="line">        (document.getElementsByTagName(<span class="string">'head'</span>)[<span class="number">0</span>] </span><br><span class="line">         || document.getElementsByTagName(<span class="string">'body'</span>)[<span class="number">0</span>]).appendChild(ds);</span><br><span class="line">    &#125;)();</span><br><span class="line">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 多说公共JS代码 end --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="友言评论"><a href="#友言评论" class="headerlink" title="友言评论"></a>友言评论</h3><figure class="highlight erb"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">section</span> <span class="attr">class</span>=<span class="string">"youyan"</span> <span class="attr">id</span>=<span class="string">"comments"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"uyan_frame"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://v2.uyan.cc/code/uyan.js?uid=&lt;%=</span></span></span> theme.youyan.id<span class="xml"><span class="tag"><span class="string">%&gt;"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h2 id="相关链接"><a href="#相关链接" class="headerlink" title="相关链接"></a>相关链接</h2><ol>
<li><strong>多说评论</strong>: <a href="http://duoshuo.com/" target="_blank" rel="external">http://duoshuo.com/</a></li>
<li><strong>友言评论</strong>: <a href="http://www.uyan.cc/" target="_blank" rel="external">http://www.uyan.cc/</a></li>
<li><strong>Disqus</strong>: <a href="https://disqus.com/" target="_blank" rel="external">https://disqus.com/</a></li>
<li><strong><em>refactor: comments code &amp; configuration 评论模块优化</em></strong> by <strong>MOxFIVE</strong> on <code>2016/01/01</code>: <a href="https://github.com/MOxFIVE/hexo-theme-yelee/commit/3138ca36bd209fd9f79b60fbb6b15b44673560b5" target="_blank" rel="external">https://github.com/MOxFIVE/hexo-theme-yelee/commit/3138ca36bd209fd9f79b60fbb6b15b44673560b5</a></li>
</ol>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="http://xiahl.top/icarus/2016/01/02/hexo-comments/" data-id="ciq3woavf0002r4vqmv497b2z" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    
        <a href="http://xiahl.top/icarus/2016/01/02/hexo-comments/#comments" class="article-comment-link disqus-comment-count" data-disqus-url="http://xiahl.top/icarus/2016/01/02/hexo-comments/">评论</a>
    

        </footer>
    </div>
    
        
<nav id="article-nav">
    
        <a href="/icarus/2016/01/10/hexo-post-version-control/" id="article-nav-newer" class="article-nav-link-wrap">
            <strong class="article-nav-caption">上一篇</strong>
            <div class="article-nav-title">
                
                    关联 GitHub, 让 Hexo 支持查看文章更新历史
                
            </div>
        </a>
    
    
        <a href="/icarus/2016/01/01/hexo-config-true-false/" id="article-nav-older" class="article-nav-link-wrap">
            <strong class="article-nav-caption">下一篇</strong>
            <div class="article-nav-title">关于 Hexo 配置文件中的 true 和 false</div>
        </a>
    
</nav>


    
</article>


    
    <section id="comments">
    
        
    <div id="disqus_thread">
        <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>

    
    </section>

</section>
            
                <aside id="sidebar">
   
        
    <div class="widget-wrap">
        <h3 class="widget-title">最新文章</h3>
        <div class="widget">
            <ul id="recent-post" class="">
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/icarus/2016/06/13/hexo-collapsible-toc/" class="thumbnail">
    
    
        <span style="background-image:url(/resources/feat.toc.gif)" alt="为 Hexo 添加可折叠的文章目录" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/icarus/categories/术业专攻/">术业专攻</a></p>
                            <p class="item-title"><a href="/icarus/2016/06/13/hexo-collapsible-toc/" class="title">为 Hexo 添加可折叠的文章目录</a></p>
                            <p class="item-date"><time datetime="2016-06-13T12:06:30.000Z" itemprop="datePublished">2016-06-13</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/icarus/2016/05/31/hexo-local-search/" class="thumbnail">
    
    
        <span style="background-image:url(/resources/hexo-local-search.gif)" alt="让 Hexo 博客支持本地站内搜索" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/icarus/categories/术业专攻/">术业专攻</a></p>
                            <p class="item-title"><a href="/icarus/2016/05/31/hexo-local-search/" class="title">让 Hexo 博客支持本地站内搜索</a></p>
                            <p class="item-date"><time datetime="2016-05-31T05:50:19.000Z" itemprop="datePublished">2016-05-31</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/icarus/2016/03/27/hexo-browsersync/" class="thumbnail">
    
    
        <span style="background-image:url(/resources/browsersync.gif)" alt="Hexo 页面自动刷新与移动端调试" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/icarus/categories/术业专攻/">术业专攻</a></p>
                            <p class="item-title"><a href="/icarus/2016/03/27/hexo-browsersync/" class="title">Hexo 页面自动刷新与移动端调试</a></p>
                            <p class="item-date"><time datetime="2016-03-26T16:17:50.000Z" itemprop="datePublished">2016-03-27</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/icarus/2016/01/10/hexo-post-version-control/" class="thumbnail">
    
    
        <span style="background-image:url(/resources/version-control.png)" alt="关联 GitHub, 让 Hexo 支持查看文章更新历史" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/icarus/categories/术业专攻/">术业专攻</a></p>
                            <p class="item-title"><a href="/icarus/2016/01/10/hexo-post-version-control/" class="title">关联 GitHub, 让 Hexo 支持查看文章更新历史</a></p>
                            <p class="item-date"><time datetime="2016-01-10T14:38:01.000Z" itemprop="datePublished">2016-01-10</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/icarus/2016/01/02/hexo-comments/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/icarus/categories/术业专攻/">术业专攻</a></p>
                            <p class="item-title"><a href="/icarus/2016/01/02/hexo-comments/" class="title">为 Hexo 主题添加评论模块 — Disqus, 多说, 友言</a></p>
                            <p class="item-date"><time datetime="2016-01-01T17:26:48.000Z" itemprop="datePublished">2016-01-02</time></p>
                        </div>
                    </li>
                
            </ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">分类</h3>
        <div class="widget">
            <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/icarus/categories/术业专攻/">术业专攻</a><span class="category-list-count">8</span></li><li class="category-list-item"><a class="category-list-link" href="/icarus/categories/自用笔记/">自用笔记</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/icarus/categories/自用笔记/术业专攻/">术业专攻</a><span class="category-list-count">1</span></li></ul></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">归档</h3>
        <div class="widget">
            <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/icarus/archives/2016/06/">六月 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/icarus/archives/2016/05/">五月 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/icarus/archives/2016/03/">三月 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/icarus/archives/2016/01/">一月 2016</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/icarus/archives/2015/11/">十一月 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/icarus/archives/2015/10/">十月 2015</a><span class="archive-list-count">2</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签</h3>
        <div class="widget">
            <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/icarus/tags/Browsersync/">Browsersync</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/icarus/tags/CSS/">CSS</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/icarus/tags/GitHub/">GitHub</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/icarus/tags/Hexo/">Hexo</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/icarus/tags/JavaScript/">JavaScript</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/icarus/tags/TagCloud/">TagCloud</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/icarus/tags/jQuery/">jQuery</a><span class="tag-list-count">2</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签云</h3>
        <div class="widget tagcloud">
            <a href="/icarus/tags/Browsersync/" style="font-size: 10px;">Browsersync</a> <a href="/icarus/tags/CSS/" style="font-size: 10px;">CSS</a> <a href="/icarus/tags/GitHub/" style="font-size: 15px;">GitHub</a> <a href="/icarus/tags/Hexo/" style="font-size: 20px;">Hexo</a> <a href="/icarus/tags/JavaScript/" style="font-size: 10px;">JavaScript</a> <a href="/icarus/tags/TagCloud/" style="font-size: 10px;">TagCloud</a> <a href="/icarus/tags/jQuery/" style="font-size: 15px;">jQuery</a>
        </div>
    </div>

    
        
    <div class="widget-wrap widget-list">
        <h3 class="widget-title">链接</h3>
        <div class="widget">
            <ul>
                
                    <li>
                        <a href="http://hexo.io">Hexo</a>
                    </li>
                
            </ul>
        </div>
    </div>


    
    <div id="toTop" class="fa fa-angle-up"></div>
</aside>
            
        </div>
        <footer id="footer">
    <div class="outer">
        <div id="footer-info" class="inner">
            &copy; 2016 夏红林<br>
            Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>. Theme by <a href="http://github.com/ppoffice">PPOffice</a>
        </div>
    </div>
</footer>
        
    
    <script>
    var disqus_shortname = 'xiahl';
    
    
    var disqus_url = 'http://xiahl.top/icarus/2016/01/02/hexo-comments/';
    
    (function() {
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    </script>



    
        <script src="/icarus/vendor/fancybox/jquery.fancybox.pack.js"></script>
    


<!-- Custom Scripts -->
<script src="/icarus/js/main.js"></script>

    </div>
</body>
</html>